<template>
  <div class="page-container">
    <el-form :model="formData" label-position="top" class="custom-form">
      <el-form-item
        label="选择要重命名的目录"
        prop="sourceDir"
        class="form-item-group"
      >
        <el-input
          v-model="formData.sourceDir"
          placeholder="请选择目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              class="browse-btn"
              @click="selectSourceDirFn"
              >浏览</el-button
            >
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="重命名规则" class="form-item-group">
        <div class="rules-container">
          <div class="rule-item">
            <el-tag type="success">1</el-tag>
            <span>删除括号及括号内内容（如[1080p]、(超清)）</span>
          </div>
          <div class="rule-item">
            <el-tag type="success">2</el-tag>
            <span>删除多余空格（如连续空格、行首行尾空格）</span>
          </div>
          <div class="rule-item">
            <el-tag type="success">3</el-tag>
            <span>删除特殊字符（如 -、_、#、*、. 等分隔符）</span>
          </div>
          <div class="rule-item">
            <el-tag type="success">4</el-tag>
            <span>修复空格（确保单词间只有一个空格）</span>
          </div>
        </div>
      </el-form-item>

      <el-form-item class="progress-section">
        <div class="progress-label">重命名进度</div>
        <el-progress
          :percentage="progress"
          :status="progress < 100 ? '' : 'success'"
          :text-inside="true"
          :stroke-width="18"
          class="custom-progress"
        />
      </el-form-item>

      <el-form-item class="button-section">
        <el-button
          type="success"
          class="primary-btn"
          @click="batchRenameFn"
          :disabled="isLoading"
          >执行重命名</el-button
        >
        <el-button type="default" class="secondary-btn" @click="resetFormFn"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-dialog
      v-model="dialogVisible"
      title="操作结果"
      width="70%"
      append-to-body
    >
      <div class="result-container">
        <div v-if="logAry.length > 0">
          <h4>重命名日志：</h4>
          <el-scrollbar height="200px">
            <ul>
              <li v-for="(log, index) in logAry" :key="index" class="log-item">
                {{ log }}
              </li>
            </ul>
          </el-scrollbar>
        </div>
        <div v-else>
          <el-empty />
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const dialogVisible = ref(false);
const resultMessage = ref('');
const logAry = ref([]);
const isLoading = ref(false);
const progress = ref(0);

const formData = reactive({
  sourceDir: ''
});

// 选择源目录
const selectSourceDirFn = async () => {
  try {
    const result = await electronAPI.openDirectoryDialog();
    if (result && result.filePaths && result.filePaths.length > 0) {
      formData.sourceDir = result.filePaths[0];
    }
  } catch (error) {
    ElMessage.error(`选择目录失败: ${error.message}`);
  }
};

// 执行批量重命名
const batchRenameFn = async () => {
  if (!formData.sourceDir) {
    ElMessage.warning('请先选择要重命名的目录');
    return;
  }

  try {
    isLoading.value = true;
    progress.value = 0;
    logAry.value = [];

    const result = await electronAPI.batchRenameDirectories(formData.sourceDir);
    resultMessage.value = `批量重命名完成，共处理 ${result.total} 个目录，成功重命名 ${result.success} 个`;
    logAry.value = result.logs || [];
  } catch (error) {
    resultMessage.value = `批量重命名失败: ${error.message}`;
  } finally {
    isLoading.value = false;
    progress.value = 100;
    dialogVisible.value = true;
  }
};

// 重置表单
const resetFormFn = () => {
  formData.sourceDir = '';
  progress.value = 0;
  logAry.value = [];
};
</script>

<style scoped>
.rules-container {
  margin-top: 10px;
}

.rule-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.rule-item span {
  margin-left: 8px;
}

.result-container {
  max-height: 400px;
  overflow-y: auto;
}

.result-container h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: bold;
}

.log-item {
  margin-bottom: 5px;
  padding: 2px 0;
}
</style>